<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 20px;
        }
        .panel-footer{
            padding:0;
            padding-right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>学生列表</h3>
            </h3>
        </div>
        <table class="table table-hover table-striped">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>

            <tr th:each="stud : ${pr.rows}">
                <td th:text="${stud.sid}"></td>
                <td th:text="${stud.sname}"></td>
                <td th:text="${stud.sex}"></td>
                <td th:text="${stud.age}"></td>
                <td th:text="${stud.addr}"></td>
                <td th:text="${stud.cname}"></td>
                <td>
                    <a href="#" class="btn btn-success btn-sm">修改</a>
                    <a href="#" class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <!-- 1. 开始条件查询-->
            <form class="form-inline" action="/student/search" id="form1" method="post" style="float:left;margin-left: 10px;margin-top: 20px;">
                <input type="hidden" id="page" name="page" value="1">
                <div class="form-group">
                    <input type="text" name="sname" class="form-control" th:value="${vo?.sname}" placeholder="学生姓名">
                </div>
                <div class="form-group">
                    <input type="text" name="addr" class="form-control"  th:value="${vo?.addr}" placeholder="学生住址">
                </div>
                <div class="form-group">
                    <select class="form-control" name="cid">
                        <option value="0">所有班级</option>
                        <option th:each="c : ${classes}" th:selected="${c.cid==vo?.cid}" th:value="${c.cid}">[[${c.cname}]]</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default">开始查询</button>
            </form>
            <!-- 2. 开始分页导航-->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>


<script th:inline="javascript">

    $(function(){
        //1. 生成分页导航
        createPageNav();

    })

    //1. 生成分页导航
    function createPageNav(){
        //1.1 得到总页数
        let totalPage = [[${pr.totalPage}]]
        //1.2 得到当前页
        let page = [[${page}]];
        //1.3 定义生成的导航的字符串
        let str = "";
        //1.4 遍历总页数生成分页导航
        for (let i = 1; i <= totalPage; i++) {
            let cls = i == page ? 'active':'';
            str += "<li class="+cls+">";
            str += "<a  onclick=skipPage('"+i+"')>" + i + "</a>"
            str += "</li>"
        }
        //1.5 将字符串设置给分页导航条
        $(".pagination li").first().after(str)
    }

    //2. 点击超链接提交表单
    function skipPage(page) {
        console.log(page)
        //2.1 为隐藏的表单赋值
        $("#page").val(page);
        //2.2 提交表单
        $("#form1")[0].submit();
    }
</script>

</html>